<template>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a href="#/" :class="{selected:flag===1}" @click="$emit('changeFlag',1)">全部任务</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:flag===2}" @click="$emit('changeFlag',2)">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:flag===3}" @click="$emit('changeFlag',3)">已完成</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('clearCompleted')">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props:{
    list:Array,
    flag:{
      required:true,
      type:Number
    }
  },
  computed:{
    shengyu(){
      return this.list.filter(item=>item.isDone===false).length
    }
  }
}
</script>